<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/vue_2.5.22.js"></script>
  <script src="../lib/moment.min.js"></script>
  <script src="../lib/axios.js"></script>
  <!-- 引入样式 -->
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    h2 {
        text-align: center;
    }

    .el-input {
        width: 180px;
    }

    .el-form {
        height: 62px;
        margin: 0 auto;
        width: 45%
    }
</style>

<body>


  <div id="app">
    <h2>图书管理系统</h2>

    <el-form :inline="true"
             :model="params"
             :rules="addFormRules"
             class="demo-form-inline"
             ref="addFormRef">
      <el-form-item label="书名" prop="bookname">
        <el-input clearable
                  placeholder="请输入书名"
                  v-model.trim="params.bookname"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input clearable
                  placeholder="请输入作者"
                  v-model.trim="params.author"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publisher">
        <el-input clearable
                  placeholder="请输入出版社"
                  v-model.trim="params.publisher"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="addBook" type="primary">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table
              :data="tableData"
              border
              style="width: 45%; margin: 0 auto;">
        <el-table-column
                align="center"
                label="编号"
                prop="id"
                width="100">
        </el-table-column>
        <el-table-column
                align="center"
                label="书名"
                prop="bookname"
                width="100">
        </el-table-column>
        <el-table-column
                align="center"
                label="作者"
                prop="author"
                width="100">
        </el-table-column>
        <el-table-column
                align="center"
                label="出版社"
                prop="publisher"
                width="100">
        </el-table-column>
        <el-table-column
                align="center"
                label="时间"
                prop="date"
                width="200">
        </el-table-column>
        <el-table-column
                align="center"
                label="操作">
          <template slot-scope="scope">
            <el-button
                    @click="editBook(scope.row)"
                    size="mini">编辑
            </el-button>
            <el-button
                    @click="deleteBook(scope.row.id)"
                    size="mini"
                    type="primary">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>


  <script>
    Vue.filter('dateFormat', (date, pattern) => {
      // 格式日期
      return moment(date).format(pattern)
    })

    axios.defaults.baseURL = 'http://www.liulongbin.top:3006';
    Vue.prototype.$axios = axios


    const app = new Vue({
      el: "#app",
      data: {
        tableData: [],
        params: {
          bookname: '',
          author: '',
          publisher: ''
        },
        addFormRules: {
          bookname: [
            {required: true, message: '书名不能为空!', trigger: 'blur'},
          ],
          author: [
            {required: true, message: '作者不能为空!', trigger: 'blur'},
          ],
          publisher: [
            {required: true, message: '出版社不能为空!', trigger: 'blur'},
          ]
        }
      },
      // 生命周期中的 created方法
      created() {
        this.getBookList();
      },
      methods: {
        async getBookList() {
          await this.$axios({
            method: 'get',
            url: '/api/getbooks'
          }).then((res) => {
              console.log(res)
              let dateStr = moment().format("YYYY-MM-DD HH:mm");
              this.tableData = res.data.data;
              this.tableData.forEach((value, index) => {
                // console.log(value)
                // 一个对象中没有这个字段, 它的值就是 undefined
                if (value['date'] === undefined) {
                  Vue.set(value, 'date', dateStr);
                }
              })
            }
          ).catch((err) => {
            console.log(err)
          })
        },
        addBook() {
          this.$refs.addFormRef.validate(async (valid) => {
            // todo 校验规则
            if (!valid) {
              return alert('请完整填写图书信息!')
            }

            await this.$axios({
              method: 'post',
              url: '/api/addbook',
              data: this.params
            }).then((res) => {
                if (res.data.status !== 201) {
                  console.log(res)
                  return alert(`添加书籍失败! 原因: ${res.data.msg}`)
                } else {
                  // 清空输入框里面的内容
                  // this.$refs.addFormRef.resetFields()
                  this.getBookList();
                  this.$refs.addFormRef.resetFields();
                }
              }
            ).catch((err) => {
              console.log(err)
            })
          })


        },
        async deleteBook(id) {
          await this.$axios({
            method: 'get',
            url: '/api/delbook',
            params: {id}
          }).then((res) => {
              if (res.data.status === 200) {
                this.getBookList();
                alert('删除图书成功!')
              } else {
                alert(`删除图书失败! 原因: ${res.data.msg}`)
              }
            }
          ).catch((err) => {
            console.log(err)
          })
        },
        editBook(body) {
          // todo
        }
      }

    });
  </script>
</body>
</html>
